<template>
  <el-container>
    <!-- 导航top -->
    <el-header class="header">
      <div class="top_img">
        <img src="../assets/images/top.png" alt="" />
      </div>
      <div class="zhanghao">
        <div class="weizhi">
          <div class="herder_right el-icon-location-information">
            <!-- &nbsp;{{ name }} -->
            &nbsp;{{nanlist.username}}
          </div>
          <div class="herder_left">
            <el-popover placement="bottom" :width="175" trigger="hover">
              <template #reference>
                <div class="el-icon-user-solid xin">
                  会员中心 <span class="el-icon-arrow-down"></span>
                </div>
              </template>
              <div
                class="xin_zi1"
                style="margin-top: 5px; margin-right: 5px; cursor: pointer"
                @click="dialogTableVisible = true"
              >
                账号信息
              </div>
              <div
                class="xin_zi1"
                style="margin-top: 10px; margin-right: 5px; cursor: pointer"
              >
                修改密码
              </div>
              <div
                class="xin_zi1"
                style="margin-top: 10px; margin-right: 5px; cursor: pointer"
                @click="tuichu"
              >
                退出登录
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </el-header>
    <el-dialog title="账号信息" v-model="dialogTableVisible">
      <table >
        <tr>
          <td class="td1">账号</td>
          <td class="td1">{{nanlist.username}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
        <tr>
          <td class="td1">姓名</td>
          <td class="td1">{{nanlist.name}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
        <tr>
          <td class="td1">联系方式</td>
          <td class="td1">{{nanlist.tel}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
        <tr>
          <td class="td1">邮箱</td>
          <td class="td1">{{nanlist.email}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
        <tr>
          <td class="td1">地址</td>
          <td class="td1">{{nanlist.address}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
        <tr>
          <td class="td1">登录密码</td>
          <td class="td1">{{nanlist.pass?"******":'******'}}</td>
          <td class="td2"><i class="el-icon-edit"></i></td>
        </tr>
      </table>
    </el-dialog>
    <!-- 导航top -->
    <!-- <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
    > -->
    <el-container>
      <!-- 导航left -->
      <el-aside width="100px" class="left" router>
        <router-link to="/Welcome">
          <!-- <el-menu-item index="/Welcome"> -->
          <div class="left_left" style="margin-top: 10px">
            <div class="el-icon-news" id="icon"></div>
            <p style="margin-left: 28px">首页</p>
          </div>
          <!-- </el-menu-item> -->
        </router-link>
        <router-link to="/student">
          <div class="left_left">
            <div class="el-icon-user-solid" id="icon"></div>
            <p>学员管理</p>
          </div>
        </router-link>
        <router-link to="/Class">
          <div class="left_left">
            <div class="el-icon-folder-remove" id="icon"></div>
            <p>班级管理</p>
          </div>
        </router-link>
        <!-- <router-link to="/course">
          <div class="left_left">
            <div class="el-icon-document" id="icon"></div>
            <p>课程管理</p>
          </div>
        </router-link> -->
        <router-link to="/check">
          <div class="left_left">
            <div class="el-icon-folder-checked" id="icon"></div>
            <p>考勤管理</p>
          </div>
        </router-link>
        <router-link to="/hour">
          <div class="left_left">
            <div class="el-icon-pie-chart" id="icon"></div>
            <p>课时汇总</p>
          </div>
        </router-link>
        <router-link to="/school">
          <div class="left_left">
            <div class="el-icon-document-copy" id="icon"></div>
            <p>校区管理</p>
          </div>
        </router-link>
        <!-- <router-link to="/else"> -->
        <el-popover placement="right" :width="175" trigger="hover">
          <template #reference>
            <div class="left_left">
              <div class="el-icon-loading" id="icon"></div>
              <p>其他设置</p>
            </div>
          </template>
          <router-link to="/course">
            <div
              class="xin_zi"
              style="margin-top: 5px; margin-right: 5px; cursor: pointer"
            >
              课程管理
            </div>
          </router-link>
          <router-link to="/classroom">
            <div
              class="xin_zi"
              style="margin-top: 10px; margin-right: 5px; cursor: pointer"
            >
              教室管理
            </div>
          </router-link>
          <router-link to="/teacher">
            <div
              class="xin_zi"
              style="margin-top: 10px; margin-right: 5px; cursor: pointer"
            >
              教师管理
            </div>
          </router-link>
          <router-link to="/account">
            <div
              class="xin_zi"
              style="margin-top: 10px; margin-right: 5px; cursor: pointer"
            >
              账号管理
            </div>
          </router-link>
        </el-popover>
        <!-- </router-link> -->
      </el-aside>
      <!-- 导航left -->
      <!-- 内容区域 main -->
      <el-main class="main">
        <router-view></router-view>
      </el-main>
      <!-- 内容区域 main -->
    </el-container>
    <!-- </el-menu> -->
  </el-container>
</template>
<style lang="less" scoped>
.xin_zi1 {
  color: rgb(163, 163, 163);
  :hover {
    color: #000;
  }
}
.header {
  // background-color: rgb(161, 175, 255);
  border-bottom: 1px rgb(219, 219, 219) solid;
  // margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

tr {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgb(233, 233, 233);
}

i {
  font-size: 25px;
  color: rgb(0, 174, 255);
}

.td1 {
  width: 300px;
  height: 50px;
  // border-bottom:1px solid rgb(165, 165, 165);
}

.td2 {
  width: 115px;
  height: 50px;
}

// .el-menu-vertical-demo{
//     height: 600px;
//     display: flex;
//     flex-direction: column;
//     justify-content: space-around;
// }
// .el-menu-vertical-demo .title{
//     flex: 1;
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     text-align: center;
// }

.top_img {
  width: 200px;
  height: 59px;
  // background-color: bisque;
}
img {
  width: 100%;
  height: 100%;
}

.zhanghao {
  width: 250px;
  height: 60px;
  // background: aqua;
}

.zhanghao .weizhi {
  width: 250px;
  height: 60px;
  display: flex;
  // background-color: blue;
  margin: auto;
}

.zhanghao .weizhi .herder_right {
  width: 120px;
  height: 60px;
  //  background-color: aqua;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
}

.zhanghao .weizhi .herder_left {
  width: 150px;
  height: 60px;
  // background-color: aquamarine;
  .xin {
    font-size: 15px;
    // font-weight: bold;
    text-align: center;
    line-height: 60px;
  }
}

.left {
  // background-color: rgb(171, 194, 238);
  height: 700px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  // box-shadow: 0 20px 0 0 rgba(0, 0, 0, 0.12);
  :hover {
    background-color: rgb(231, 231, 231);
  }
  font-size: 12px;
}

.left .left_left {
  width: 80px;
  height: 60px;
  //   background-color: darkkhaki;
  border-radius: 4px;
  margin-left: 5px;
  margin-top: 0px;
  margin-left: 10px;
}

.left .left_left p {
  font-size: 12px;
  // font-weight: bold;
  margin-left: 15px;
  margin-top: 3px;
}

.left .left_left div {
  margin-left: 25px;
  font-size: 30px;
}

.main {
  background-color: #f1f2f6;
  //  box-shadow: 10px 10px 10px 10px #f00;
}

#icon {
  margin-top: 5px;
}
</style>

<script>
export default {
  data() {
    return {
      navigationList:[
        {
          name:"",
          path:"",
          
        }
      ],
      visible: true,
      name: "",
      nanlist: [],
      dialogTableVisible: false,
    };
  },
  created() {
    this.list();
    this.zhlist();
  },
  methods: {
    nan(index){
      alert(index)
    },
    list() {
      // let abc=window.sessionStorage.getItem("success_token.title");
      this.name = window.sessionStorage.getItem("name");
      // console.log(abc);
    },
    tuichu() {
      window.sessionStorage.clear();
      this.$message.success("退出成功");
      this.$router.push("/login");
    },
    async zhlist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/company/get"
      );
      console.log(res);
      if (res.errCode == "10000") {
        this.nanlist = res.data;
      } else {
        this.$message.error("请求账号信息失败");
      }

      // console.log(res);
    },
    changeStatus() {
      // this.$router.push("/Welcome");
      // alert(123)
    },
    // Class() {
    //   this.$router.push("/class");
    // },
    // course() {
    //   this.$router.push("/course");
    // },
    // check() {
    //   this.$router.push("/check");
    // },
    // hour() {
    //   this.$router.push("/hour");
    // },
    // student() {
    //   this.$router.push("/student");
    // },
  },
};
</script>
